import { Button, DialogTrigger, Heading } from 'react-aria-components';
import { Dialog } from '~/aria/Dialog';
import { Modal } from '~/aria/Modal';
import { DeviceCommand, DeviceState } from '~/ui/device';
import { DeviceIcon } from '~/ui/device-icon';
import { SwitchState } from '~/ui/state/switch';

export function DeviceCardBody({ device }: { device: Device }) {

    let disabled = false;

    switch (device.type) {
        case 19:
            disabled = true;
    }





    return (


        <DialogTrigger>

            <Button className="w-36 bg-white shadow-md rounded-lg px-4 py-2" isDisabled={disabled}
            >

                {/* <svg className="w-6 h-6 mr-2"></svg> */}

                {/* <p className="text-gray-700 text-base">{device.type}</p> */}

                <div className='flex items-center gap-2'>
                    <div className='rounded-full bg-yellow-400'>
                        <DeviceIcon type={device.type}></DeviceIcon>
                    </div>
                    <div className=" text-gray-700 text-base">

                        <DeviceState device={device} />
                    </div>
                </div>
            </Button >
            <Modal isDismissable>
                <Dialog>

                    <Heading slot="title">{device.name}</Heading>
                    <DeviceCommand device={device} />
                </Dialog>
            </Modal>
        </DialogTrigger >
    );
}